<template>
    <div class="dv-layout-lab row gy-2" :class="[layoutClass, focusClass]">
        <!-- start:: extra small -->
        <div class="col-12 proto-lab bg-dark" v-for="screen in ['size-std', 'size-wide']" :key="screen">
            <div class="title h2 text-white position-absolute">xs {{screen}}</div>
            <div class="dv-main-layout bg-success">
                <div class="bg-warning brief-view brief-view-xs pos-left  pos-top   " :class="screen"></div>
                <div class="bg-warning brief-view brief-view-xs pos-left  pos-middle" :class="screen"></div>
                <div class="bg-warning brief-view brief-view-xs pos-left  pos-bottom" :class="screen"></div>
                <div class="bg-warning brief-view brief-view-xs pos-right pos-top   " :class="screen"></div>
                <div class="bg-warning brief-view brief-view-xs pos-right pos-middle" :class="screen"></div>
                <div class="bg-warning brief-view brief-view-xs pos-right pos-bottom" :class="screen"></div>
            </div>
        </div>
        <div class="col-12 proto-lab bg-dark" v-for="screen in ['size-std', 'size-wide']" :key="screen">
            <div class="title h2 text-white position-absolute">xs {{screen}} mixed left</div>
            <div class="dv-main-layout bg-success">
                <div class="bg-warning brief-view brief-view-ln pos-left  size-xs   " :class="screen"></div>
                <div class="bg-warning brief-view brief-view-xs pos-right pos-top   " :class="screen"></div>
                <div class="bg-warning brief-view brief-view-xs pos-right pos-middle" :class="screen"></div>
                <div class="bg-warning brief-view brief-view-xs pos-right pos-bottom" :class="screen"></div>
            </div>
        </div>
        <div class="col-12 proto-lab bg-dark" v-for="screen in ['size-std', 'size-wide']" :key="screen">
            <div class="title h2 text-white position-absolute">xs {{screen}} mixed right</div>
            <div class="dv-main-layout bg-success">
                <div class="bg-warning brief-view brief-view-xs pos-left  pos-top   " :class="screen"></div>
                <div class="bg-warning brief-view brief-view-xs pos-left  pos-middle" :class="screen"></div>
                <div class="bg-warning brief-view brief-view-xs pos-left  pos-bottom" :class="screen"></div>
                <div class="bg-warning brief-view brief-view-ln pos-right size-xs   " :class="screen"></div>
            </div>
        </div>
        <!-- end:: extra small -->

        <!-- start:: normal small -->
        <div class="col-12 proto-lab bg-dark" v-for="screen in ['size-std', 'size-wide']" :key="screen">
            <div class="title h2 text-white position-absolute">sm {{screen}}</div>
            <div class="dv-main-layout bg-success">
                <div class="bg-warning brief-view brief-view-sm pos-left  pos-top   " :class="screen"></div>
                <div class="bg-warning brief-view brief-view-sm pos-left  pos-bottom" :class="screen"></div>
                <div class="bg-warning brief-view brief-view-sm pos-right pos-top   " :class="screen"></div>
                <div class="bg-warning brief-view brief-view-sm pos-right pos-bottom" :class="screen"></div>
            </div>
        </div>
        <div class="col-12 proto-lab bg-dark" v-for="screen in ['size-std', 'size-wide']" :key="screen">
            <div class="title h2 text-white position-absolute">sm {{screen}} mixed left</div>
            <div class="dv-main-layout bg-success">
                <div class="bg-warning brief-view brief-view-ln pos-left  size-sm   " :class="screen"></div>
                <div class="bg-warning brief-view brief-view-sm pos-right pos-top   " :class="screen"></div>
                <div class="bg-warning brief-view brief-view-sm pos-right pos-bottom" :class="screen"></div>
            </div>
        </div>
        <div class="col-12 proto-lab bg-dark" v-for="screen in ['size-std', 'size-wide']" :key="screen">
            <div class="title h2 text-white position-absolute">sm {{screen}} mixed right</div>
            <div class="dv-main-layout bg-success">
                <div class="bg-warning brief-view brief-view-sm pos-left  pos-top   " :class="screen"></div>
                <div class="bg-warning brief-view brief-view-sm pos-left  pos-bottom" :class="screen"></div>
                <div class="bg-warning brief-view brief-view-ln pos-right size-sm   " :class="screen"></div>
            </div>
        </div>
        <!-- end:: normal small -->

        <div class="col-12 proto-lab bg-dark">
            <div class="title h2 text-white position-absolute">large</div>
            <div class="dv-main-layout bg-success">
                <div class="bg-warning detail-view"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from "vuex"
    export default {
        name: "LayoutProto",
        computed: {
            ...mapGetters("dv_layout", ["layoutClass", "focusClass"])
        }
    }
</script>

<style lang="scss" scoped>
    @use "sass:math";
    @import "../../assets/sass/init";

    .proto-lab {
        $lab-width: math.div($viewport-width, 4.25);
        $lab-height: math.div($viewport-height, 4.25);
        $percent: math.div($lab-height, ($brief-view-sm-height * 2 + $viewport-height));
        width: calc(#{$lab-width} * 1px);
        height: calc(#{$lab-height} * 1px);

        .dv-main-layout {
            @include dv-transform(scale(#{$percent}, #{$percent}) translate(30%, 30%));
            @include dv-transform-origin(0 0);
        }
    }
</style>
